<template>
  <div class="left-container">
    <h3>Left 组件 -- {{count}}</h3>
    <button @click="count += 1">+1</button>
    <button @click="count -= 1">-1</button>
    <hr/>
    <!--声明一个插槽-->
    <!--vue官方规定：每一个slot插槽都要有一个name名称-->
    <!--如果省略name属性，则有一个default默认名称-->
    <slot name="default">这是default插槽的默认内容</slot>
  </div>
</template>
<script>


export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

//为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：
<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
h3{
  color: red;
}
</style>
